@import '../common/common/base.less';

@left: 20px;
@top: 10px;

.archives-container {
    .timeline {
        position: relative;
        margin: 0 auto;
        padding-left: 20px;
        max-width: 740px;
        width: 100%;

        &::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: #f5f5f5;
            content: " ";
        }

        li {
            .year {
                position: relative;
                margin: 80px 0 0;
                color: #555;
                font-weight: 700;
                font-size: 26px;

                &::before {
                    position: absolute;
                    top: 50%;
                    left: -23px;
                    z-index: 2;
                    margin-top: -5px;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: #ddd;
                    content: " ";
                }
            }

            ul.year-wrapper {
                li {
                    position: relative;
                    display: flex;
                    padding: 30px 0 10px;
                    border-bottom: 1px dashed #ccc;
                    list-style: none;

                    .date {
                        position: relative;
                        flex-shrink: 0;
                        // width: 40px;
                        margin-right: 20px;
                        color: fade(@title-color, 70%);
                        font-size: 12px;
                        line-height: 30px;

                        &::before {
                            position: absolute;
                            top: 50%;
                            left: -22px;
                            z-index: 2;
                            margin-top: -4px;
                            width: 8px;
                            height: 8px;
                            border: 1px solid #fff;
                            border-radius: 50%;
                            background: #ddd;
                            content: " ";
                        }
                    }

                    .title {
                        // color: #555;
                        font-size: 16px;
                        line-height: 30px;
                    }
                }
            }
        }
    }
}